import tools from "./tools"

let _this

class Form extends Element {
    constructor(props) {
        super(props)

    }

    /**
     * 渲染完成事件
     */
    componentDidMount() {
        if (tools.getParameters().data) {
            this.formData = Object.assign(this.formData, tools.getParameters().data)
            this.componentUpdate()
        }
    }

    /**
     * 表单数据
     * @type {{password: string, address: string, port: string, name: string, ssh: boolean, cert: {cert: string, key: string, ca: string}}}
     */
    formData = {
        name: "",
        address: "",
        port: "6379",
        password: "",
        ssh: false,
        cert: {
            key: "",
            cert: "",
            ca: ""
        }
    }

    /**
     * 连接名称
     * @param ev {Event} sciter Event
     * @param ele {Element} 当前元素
     */
    connNameChange(ev, ele) {
        this.formData.name = ele.value
    }

    /**
     * 连接地址
     * @param ev {Event} sciter Event
     * @param ele {Element} 当前元素
     */
    connAddressChange(ev, ele) {
        this.formData.address = ele.value
    }

    /**
     * 连接端口
     * @param ev {Event} sciter Event
     * @param ele {Element} 当前元素
     */
    connPortChange(ev, ele) {
        this.formData.port = ele.value
    }

    /**
     * 连接密码
     * @param ev {Event} sciter Event
     * @param ele {Element} 当前元素
     */
    connPasswordChange(ev, ele) {
        this.formData.password = ele.value
    }

    /**
     * ssl功能开启
     * todo: ssl自定义证书功能待redis-rs包支持
     * @param ev {Event} sciter Event
     * @param ele {Element} 当前元素
     */
    sslChange(ev, ele) {
        this.formData.ssl = ele.value
        this.componentUpdate()
    }

    /**
     * ssh改变
     * @param ev {Event} sciter Event
     * @param ele {Element} 当前元素
     */
    sshChange(ev, ele) {
        this.formData.ssh = this.value
        setTimeout(() => {
            _this.componentUpdate()
        }, 10)
    }

    /**
     * 证书地址改变
     * @param ev {Event} sciter Event
     * @param ele {Element} 当前元素
     */
    chooseCert(ev, ele) {
        setTimeout(() => {
            let file = tools.getView().selectFile()
            if (!file) return
            this.formData.cert.cert = file
            this.componentUpdate()
        })
    }

    /**
     * key地址改变
     * @param ev {Event} sciter Event
     * @param ele {Element} 当前元素
     */
    chooseKey(ev, ele) {
        setTimeout(() => {
            let file = tools.getView().selectFile()
            if (!file) return
            this.formData.cert.key = file
            this.componentUpdate()
        })
    }

    /**
     * ca证书改变
     * @param ev {Event} sciter Event
     * @param ele {Element} 当前元素
     */
    chooseCa(ev, ele) {
        setTimeout(() => {
            let file = tools.getView().selectFile()
            if (!file) return
            this.formData.cert.ca = file
            this.componentUpdate()
        })
    }

    /**
     * todo：ssh通道和集群功能待下一波开发
     * @param evt {Event} 事件sciter Event
     * @param ele {Element} 事件sciter Element
     */
    connectOptionChange(evt, ele) {

    }

    /**
     * 渲染选择证书表单
     * @returns {JSX.Element|*[]}
     */
    renderChooseSSLFile() {
        if (this.formData.ssl === "1") {
            return <div style={"height: 120px;"}>
                <div class="item">
                    <span class="label">cert</span>
                    <span class={"input"}>
                        <button class="btn btn-primary" onClick={() => this.chooseCert()}>cert</button>
                        <div class={"file-info"}>{this.formData.cert.cert}</div>
                    </span>
                </div>
                <div class="item">
                    <span class="label">key</span>
                    <span class={"input"}>
                       <button class="btn btn-primary" onClick={() => this.chooseKey()}>key</button>
                        <div class={"file-info"}>{this.formData.cert.key}</div>
                    </span>
                </div>
                <div class="item">
                    <span class="label">cacert</span>
                    <span class={"input"}>
                       <input
                           class="btn btn-primary" type="button"
                           onClick={() => this.chooseCa()}>cacert</input>
                        <div class={"file-info"}>{this.formData.cert.ca}</div>
                    </span>
                </div>
            </div>
        }
        return []

    }

    /**
     * 提交按钮点击事件
     * @param evt {Event} 事件
     * @param ele {Element} 当前元素
     */
    ["on click at .submit"](evt, ele) {
        if (!this.check_input()) {
            return false
        }
        let res = tools.getParameters().view.xcall("add_conn", this.formData)
        if (res === true) {
            tools.alert("保存成功！", {type: "success"})
                .then(res => {
                    tools.getView().close({
                        code: 1
                    })
                })

        }
    }

    /**
     * 校验输入数据
     * @returns {boolean}
     */
    check_input() {
        if (!this.formData.name) {
            setTimeout(() => {
                tools.alert("请输入连接名称！", {type: "warning"})
            })
            return false
        }
        if (!this.formData.address) {
            setTimeout(() => {
                tools.alert("请输入连接地址！", {type: "warning"})
            })
            return false
        }
        if (!this.formData.port) {
            setTimeout(() => {
                tools.alert("请输入连接端口！", {type: "warning"})
            })
            return false
        }
        return true
    }

    /**
     * 渲染函数
     * @returns {JSX.Element}
     */
    render() {
        return <form class={"form"}>
            <div class="item">
                <span class="label">连接名称</span>
                <input
                    value={this.formData.name}
                    class="input"
                    type="text"
                    onChange={(...args) => this.connNameChange(...args)}
                    placeholder="名称"/>
            </div>
            <div class="item">
                <span class="label">连接地址</span>
                <input
                    class="input input-addr"
                    onChange={(...args) => this.connAddressChange(...args)}
                    type="text"
                    value={this.formData.address}
                    placeholder="地址"/>
                :
                <input
                    value={this.formData.port}
                    class="input input-port" onChange={(...args) => this.connPortChange(...args)} placeholder="端口"/>
            </div>
            <div class="item">
                <span class="label">连接密码</span>
                <input
                    value={this.formData.password}
                    class="input"
                    onChange={(...args) => this.connPasswordChange(...args)}
                    type="text" placeholder="密码"/>
            </div>
            <div class="item">
                <span class="label">启用SSL</span>
                <span class={"input"}>
                    <div class={"i-col"}>
                        <input class="v-middle" value="1" disabled={true} onChange={(...args) => this.sslChange(...args)} id={"ssl-open"} name={"ssl"} type="radio"/>
                        <label for="ssl-open"> 启用</label>
                    </div>
                    <div class={"i-col"}>
                        <input class="v-middle" value="0" disabled={true} onChange={(...args) => this.sslChange(...args)} id={"ssl-close"} name={"ssl"} type="radio"/>
                        <label for="ssl-close"> 关闭</label>
                    </div>
                </span>
            </div>
            {this.renderChooseSSLFile()}
            <div class="item">
                <span class="label">连接选项</span>
                <span class="input">
                    <div class={"i-col"}>
                         <input class="v-middle" disabled={true}
                                onChange={(...args) => this.connectOptionChange(...args)}
                                id={"ssh"} name={"options"} type="checkbox"/>
                        <label for="ssh"> SSH通道</label>
                    </div>
                    <div class={"i-col"}>
                        <input class="v-middle" disabled={true} id={"cluster"} name={"options"} type="checkbox"/>
                        <label for="cluster"> 集群</label>
                    </div>
                </span>
            </div>
            <div class={"item"}>
                <span class="label">SSH用户</span>
                <input class="input" id={"ssh-username"} disabled={true} type="text" placeholder="用户名"/>
            </div>
            <div class={"item"}>
                <span class="label">连接地址</span>
                <input class="input input-addr" disabled={true} type="text" placeholder="地址"/>
                :
                <input class="input input-port" disabled={true} placeholder="端口"/>
            </div>
            <div class="item">
                <span class="label">连接密码</span>
                <input class="input" disabled={true} type="text" placeholder="密码"/>
            </div>
            <div class="action">
                <button class="btn btn-primary submit" style={"height:28px"}>确定</button>
                <button onClick={() => tools.windowClose()} class="btn btn-primary cancel" style={"height:28px"}>取消</button>
            </div>
        </form>
    }
}

document.$("#form").patch(<Form/>)

document.$(".app-name").innerText = tools.getParameters().title
document.on("click", "#exit", e => {
    tools.windowClose()
})